<template>
    <div id="progress-loop" ref="chartDom" style="width: 100px;height: 100px;"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    annularData: {
      type: Array,
      default: [],
    }
  })
  let myChart = null;
        let angle=0;
        let value = props.annularData; //图上角度数据
    const Option = computed(() => {
      return {
        title: {
            text: '{a|'+ value +'}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich:{
                    a: {
                        fontSize: 15,
                        color: '#ffffff',
                        fontWeight: 'bold'
                    },
                    c: {
                        fontSize: 15,
                        color: '#ffffff',
                        fontWeight: 'normal'
                    }
                }
            }
        },
        series: [
            //内环
            {
                name: "",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
                            startAngle: (0+-angle) * Math.PI / 180,
                            endAngle: (360+-angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 0.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            //外环
            {
                name: '',
                type: 'pie',
                radius: ['85%', '70%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    normal: {
                        position: "center",
                    }
                },
                data: [
                    {
                        value: value,
                        name: "",
                        itemStyle: {
                            normal: {
                                //外环发光
                                borderWidth: 0.5,
                                shadowBlur: 10,
                                borderColor: '#4bf3f9',
                                shadowColor: '#9bfeff',
                                color: { // 圆环的颜色
                                    colorStops: [{
                                        offset: 0,
                                        color: '#4bf3f9', // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#4bf3f9', // 100% 处的颜色
                                    }]
                                },
                            }
                        }
                    },
                    {
                        value: 100-value,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#173164"
                            }
                        }
                    }
                ]
            },
        ]
    };
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  